import React, {
	Component,
	PropTypes
} from 'react'

// 组件
class AddTodo extends Component {
	handleClick() {
		const node = this.refs.myInput
		const text = node.value.trim()
		this.props.onAddClick(text) // 映射函数
		node.value = ''
	}
	render() {
		return (
			<div>
				<input ref="myInput" type="text"/>
				<button onClick={this.handleClick.bind(this)}>Add</button>
			</div>
		)
	}
}

const TodoList = (props) => {
	const {
		onToggleClick,
		lists
	} = props
	return (
		<ul>
			{
				Array.prototype.map.call(lists,function(elem,index){
					return <li key={index}
					onClick={()=>onToggleClick(elem.id)}
					style={{ textDecoration : elem.completed ? 'line-through' : 'none' }}>
					{elem.text}
					</li>
				})
				// lists.map(function(elem,index){
				// 	return <li key={index}
				// 	onClick={()=>onToggleClick(elem.id)}
				// 	style={{ textDecoration : elem.completed ? 'line-through' : 'none' }}>
				// 	{elem.text}
				// 	</li>
				// })
			}
		</ul>
	)
}

TodoList.propTypes = {
	list: React.PropTypes.array
};

TodoList.defaultProps = {
	lists: []
}

const Footer = (props) => {
	return (
		<div>
			<button filter="SHOW_ALL">ALL</button>
			<button filter="SHOW_COMPLETED">COMPLETED</button>
			<button filter="SHOW_ACTIVE">ACTIVE</button>
		</div>
	)
}

const List = (props) => {
	const {
		addClick,
		todoLists,
		toggleClick
	} = props
	return (
		<div>
			<AddTodo onAddClick={(text)=>addClick(text)}/>
			<TodoList lists={todoLists} onToggleClick={(id)=>toggleClick(id)}/>
			<Footer/>
		</div>
	)
}

export default List